<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>张乃川的简历页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/process" type="text/css"/>
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-header.css" rel="stylesheet">
    <link href="css/style-nav.css" rel="stylesheet">
    <link href="css/style-projects-edu.css" rel="stylesheet">
    <link href="css/animation.css" rel="stylesheet">
    <script src="echarts/echarts-en.js"></script>
</head>
<body>
    <header id="top">
        <div id="slide" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item">
                    <div class="d-block w-100" style="background-image: url('assets/TA简单demo.jpg');"></div>
                </div>
              <div class="carousel-item">
                  <div class="d-block w-100" style="background-image: url('assets/微仿Microsoft Fluent Design System图标.jpg');"></div>
              </div>
              <div class="carousel-item">
                <div class="d-block w-100" style="background-image: url('assets/微仿Microsoft Fluent Design System图标（透明版本）.jpg');"></div>
              </div>
              <div class="carousel-item">
                <div class="d-block w-100" style="background-image: url('assets/发光地面改.jpg');"></div>
              </div>
              <div class="carousel-item">
                <div class="d-block w-100" style="background-image: url('assets/发光的球=\ =.jpg');"></div>
              </div>
              <div class="carousel-item">
                <div class="d-block w-100" style="background-image: url('assets/烟雾.jpg');"></div>
              </div>
              <div class="carousel-item">
                <div class="d-block w-100" style="background-image: url('assets/抽象针式1.jpg');"></div>
              </div>
              <div class="carousel-item active">
                <div class="d-block w-100" style="background-image: url('assets/抽象针式MIKU.jpg');"></div>
              </div>
              <div class="carousel-item">
                <div class="d-block w-100" style="background-image: url('assets/马克杯2.jpg');"></div>
              </div>
              <div class="carousel-item">
                <div class="d-block w-100" style="background-image: url('assets/低模冰山场景.jpg');"></div>
              </div>
            </div>
        </div>
        <section class="header-container">
            <h1>ZZMilkTEA</h1>
            <h3>一位正在游戏行业工作的软件开发者</h3>
            <div>
                <span onclick="scrollToTarget('about-me')">关于我</span>
                <span onclick="scrollToTarget('my-projects')">我的项目</span>
            </div>
        </section>
    </header>
    <nav>
        <div class="nav-title">
            <span onclick="scrollToTarget('top')">张乃川的简历页面</span>
        </div>
        <div class="nav-bullet-container">
            <span class="nav-bullet" onclick="scrollToTarget('about-me')">关于我</span>
            <span class="nav-bullet" onclick="scrollToTarget('career-objective')">求职意向</span>
            <span class="nav-bullet" onclick="scrollToTarget('my-skills')">我的技能</span>
            <span class="nav-bullet" onclick="scrollToTarget('my-projects')">我的项目</span>
            <span class="nav-bullet" onclick="scrollToTarget('interest')">我的兴趣</span>
            <span class="nav-bullet" onclick="scrollToTarget('education-bg')">教育背景</span>
        </div>
    </nav>
    <main>
        <article>
            <section id="about-me">
                <h1 style="margin-top: 0;">关于我</h1>
                <div><img class="avatar" src="assets/golang rides php.png"  alt="我的头像"></div>
                <p>Howdy! 我叫张乃川，昵称奶茶，23岁，目前住在上海，毕业于南京林业大学的计算机科学技术专业，本科。目前任职叠纸游戏的服务器开发，自己也做过一些全栈项目，前后端的开发经验都有。现在也在努力自学各种开发技术。</p>
                <p>资深游戏玩家（自诩），涉猎各种平台和游戏类型，对游戏开发充满着兴趣</p>
                <p>希望能努力码出自己想要的世界！Hello,world！</p>
            </section>
            <section id="career-objective">
                <h1>意向岗位（兴趣程度排序）</h1>
                <div class="post-container">
                    <div class="post">
                        <h3>技术美术</h3>
                        <div class="icon"><i class="fas fa-paint-roller fa-7x"></i></div>
                        <p>自己有一定的美术基础，并且喜爱游戏和编程。希望能通过技术能更好地表达自己内心的世界</p>
                        <p>努力自学ing</p>
                    </div>
                    <div class="post">
                        <h3>游戏客户端开发</h3>
                        <div class="icon"><i class="fas fa-gamepad fa-7x"></i></div>
                        <p>虽然自己没有太多游戏开发的经验，但是自己也是接触过并使用Unity写过一个小小半成品。用canvas写过小游戏</p>
                        <p>自学Unity中，并期待下未来的UE5！</p>
                    </div>
                    <div class="post">
                        <h3>游戏服务器开发</h3>
                        <div class="icon"><i class="fas fa-terminal fa-7x"></i></div>
                        <p>这是我目前擅长的工作，有半年的工作经验。能抽象后端逻辑，实现游戏服务器业务</p>
                        <p>目前更偏爱使用Golang</p>
                    </div>
                </div>
            </section>
            <section id="my-skills">
                <h1>我的技能</h1>
                <div class="skill-container">
                    <div class="skill">
                        <h3>计算机通用技能</h3>
                        <div class="skill-echarts" id="computer-skill"></div>
                    </div>
                    <div class="skill">
                        <h3>技术美术技能</h3>
                        <div class="skill-echarts" id="ta-skill"></div>
                    </div>
                    <div class="skill">
                        <h3>服务端开发技能</h3>
                        <div class="skill-echarts" id="back-end-skill"></div>
                    </div>
                </div>
            </section>
            <section id="my-projects">
                <h1>我的项目</h1>
                <div class="project-container">
                    <div class="project">
                        <div class="date">
                            <span>10/2020</span>
                            <span>-</span>
                            <span>至今</span>
                        </div>
                        <div class="link-line"></div>
                        <div class="description">
                            <h4>《恋与制作人》</h4>
                            <div class="position">服务器开发</div>
                            <dl class="info">
                                <div class="entry">
                                    <dt>岗位职责</dt>
                                    <dd>
                                        <li>功能开发：包括GM后台、游戏内功能的开发</li>
                                        <li>数据捞数：通过服务器内埋点数据，捞出符合运营需求的数据供分析</li>
                                        <li>工具优化：部署搭建项目应用如Jenkins、wiki系统、FTP等，提高工作效率和舒适度</li>
                                        <li>BUG排查修复：在开发阶段处理QA反馈的BUG，处理运营反馈的线上BUG</li>
                                    </dd>
                                </div>
                            </dl>
                        </div>
                    </div>
                    <div class="project">
                        <div class="date">
                            <span>07/2020</span>
                            <span>-</span>
                            <span>08/2020</span>
                        </div>
                        <div class="link-line"></div>
                        <div class="description">
                            <h4>学生课时管理系统</h4>
                            <div class="position">需求沟通、设计、开发、部署、维护</div>
                            <dl class="info">
                                <div class="entry">
                                    <dt>项目内容</dt>
                                    <dd>实现学生客户的课时查询和教师进行划课时的功能，其包括学生信息的管理和班级的管理，目前目标用户量为五百人以内</dd>
                                </div>
                                <div class="entry">
                                    <dt>技术栈</dt>
                                    <dd>Golang, Gin, REST api, Vue, Docker, Nginx, Mysql</dd>
                                </div>
                                <div class="entry">
                                    <dt>个人职责</dt>
                                    <dd>与客户沟通需求，个人独立设计开发部署维护，实现上述功能</dd>
                                </div>
                                <div class="entry">
                                    <dt>项目成就</dt>
                                    <dd>投入生产环境，正常运行</dd>
                                </div>
                                <div class="entry">
                                    <dt>个人收获</dt>
                                    <dd>是首次开发投入到实际商业使用的系统。项目进行期间经历了与客户反复沟通需求，以及用户反馈bug并修复的过程</dd>
                                </div>
                            </dl>
                        </div>
                    </div>
                    <div class="project">
                        <div class="date">
                            <span>04/2020</span>
                            <span>-</span>
                            <span>06/2020</span>
                        </div>
                        <div class="link-line"></div>
                        <div class="description">
                            <h4>音视频播放门户网站</h4>
                            <div class="position">设计、开发、部署、维护</div>
                            <dl class="info">
                                <div class="entry">
                                    <dt>项目内容</dt>
                                    <dd>
                                        毕设项目。实现一个音视频门户网站，其具有音视频的上传、审核、点播、举报、评论等功能。
                                        有普通的弹幕显示和音频可视化功能。使用前后端分离架构
                                    </dd>
                                </div>
                                <div class="entry">
                                    <dt>技术栈</dt>
                                    <dd>Golang, Gin, REST api, Vue, Redis, Docker, Nginx, Mysql</dd>
                                </div>
                                <div class="entry">
                                    <dt>个人职责</dt>
                                    <dd>个人独立设计开发部署维护，实现上述功能</dd>
                                </div>
                                <div class="entry">
                                    <dt>项目成就</dt>
                                    <dd>此毕设项目在学校获得了优秀（90+）的成绩，并上线可投入使用</dd>
                                </div>
                                <div class="entry">
                                    <dt>项目链接</dt>
                                    <dd><a href="http://media-website.r3mix4lles.cn:9999/#/" target="_blank">http://media-website.r3mix4lles.cn:9999/#/</a></dd>
                                </div>
                                <div class="entry">
                                    <dt>个人收获</dt>
                                    <dd>个人独立设计开发部署维护，实现上述功能</dd>
                                </div>
                            </dl>
                        </div>
                    </div>
                </div>
            </section>
            <section id="interest">
                <h1>我的兴趣</h1>
                <div class="interest-container">
                    <span>二次元</span>
                    <span>编程</span>
                    <span>电子游戏</span>
                    <span>赛博朋克与蒸汽朋克文化</span>
                    <span>视频剪辑与特效</span>
                    <span>编曲</span>
                    <span>架子鼓</span>
                    <span>三维建模与渲染</span>
                    <span>动画制作</span>
                    <span>绘画与平面设计</span>
                </div>
                <p>……</p>
            </section>
            <section id="education-bg">
                <h1>教育背景</h1>
                <div class="edu-experience">
                    <div class="date">
                        <span>09/2016</span>
                        <span>-</span>
                        <span>06/2020</span>
                    </div>
                    <div class="link-line"></div>
                    <div class="description">
                        <h4>南京林业大学</h4>
                        <div class="position">本科  计算机科学与技术专业</div>
                        <dl class="info">
                            <div class="entry">
                                <dt>主修专业课程</dt>
                                <dd>
                                    数据结构、操作系统、算法分析、数据库原理、Java、JavaEE、C语言程序设计、C++、web技术与应用、网络程序设计、软件工程、移动应用开发、汇编、计算机组成原理、编译原理、计算机网络、Linux程序设计、模数电
                                </dd>
                            </div>
                            <div class="entry">
                                <dt>奖项、荣誉、证书</dt>
                                <dd>
                                    蓝桥杯第十届软件类Java软件开发大学B组省赛三等奖、蓝桥杯第十一届软件类Java软件开发大学B组省赛一等奖、HUAWEI Developer Codelab 团体三等奖、大学生学科竞赛先进个人、蓝桥杯第十一届设计类动画设计全国二等奖、CET-4
                                </dd>
                            </div>
                            <div class="entry">
                                <dt>在校职位</dt>
                                <dd>
                                    南京林业大学交响乐团-器乐部部长、校园动漫社团-社长、校园计算机社团-副社长
                                </dd>
                            </div>
                        </dl>
                    </div>
                </div>
            </section>
        </article>
    </main>
    <footer>
        <address>
            <a href="https://github.com/ZZMilkTEA" target="_blank">Github</a>
            <a href="https://gitee.com/zzmilktea" target="_blank">我的Gitee</a>
            <a href="http://www.zzmilktea.codes/" target="_blank">我的Blog</a>
        </address>
    </footer>
    <script src="https://kit.fontawesome.com/14e616173f.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/myNav.js"></script>
    <script type="text/javascript" src="js/scroll.js"></script>
    <script type="text/javascript" src="js/skills.js"></script>
    <script type="text/javascript" src="js/animation.js"></script>
</body>
